<template>
  <div id="temp">
    <!--   手机轮播   -->
    <div class="theader">
      <div class="Phone_swiper">

      </div>

      <!--   消息通知  -->
      <div class="Notify_mess">

      </div>
    </div>
    <div class="tmiddle">
      <!--  手机信息  -->
      <div class="Phone_mess">
        <ul class="phone_ul">
          <li class="phone_list" v-for="(item,index) in PhoneList" @mouseover="compareBtn(index)"
              @mouseout="compareflag=undefined" :class="compareflag == index?'phone_listHover':''">
            <router-link to="/PhoneMessage">
              <img :src="item.imgsrc" alt="">
              <!--            <img src="../assets/xiaomi10.jpg" alt="">-->
              <p class="phone_title">标题：{{item.type}}</p>
              <p>参考价格：<span class="price_style">{{item.price}}</span></p>
              <div class="comment_row">
              <span class="star">
                <em style="width:56%"></em>
              </span>
                <span class="score">9.6</span>
              </div>
            </router-link>
            <p @click="addCompare(item)" v-show="compareflag == index?true:false">对比</p>
          </li>
        </ul>
        <div class="PageBtn">
          <span class="fontBtn" @click="fontClick()" v-show="pageflag">< 上一页</span>
          <span class="NumBtn" @click="numClick(pageNum)"
                :class="pagelightflag == pageNum? 'pagelight': ''">{{pageNum}}</span>
          <span class="NumBtn" @click="numClick(pageNum+1)" :class="pagelightflag == pageNum+1? 'pagelight': ''">{{pageNum+1}}</span>
          <span class="NumBtn" @click="numClick(pageNum+2)" :class="pagelightflag == pageNum+2? 'pagelight': ''">{{pageNum+2}}</span>
          <span style="border: 0">...</span>
          <span class="nextBtn" @click="nextClick()">下一页 ></span>
        </div>
      </div>
      <!--  手机新品  -->
      <div class="News">
        <div class="News_Main">
          <div class="News_title"><h4>手机新品</h4></div>
          <div class="News_middle">
            <ul>
              <li v-for="(item,index) in NewsPhone" :key="index" @mouseover="NewsPhoneflag=index">
                <!--                <em :class="index<3?'hotEm':''">{{index+1}}</em>-->
                <em :class="{'hotEm':index<3,'liHoverblock':NewsPhoneflag === index}">{{index+1}}</em>
                <img v-show="NewsPhoneflag === index?true:false" :src="item.imgsrc" alt="">
                <p :class="{'liHoverblock':NewsPhoneflag === index}">{{item.type}}</p>
                <em style="top:25px;color: red;" v-show="NewsPhoneflag === index?true:false"
                    :class="{'liHoverblock':NewsPhoneflag === index}">{{item.price}}</em>
              </li>
            </ul>
          </div>
          <div class="News_bottom"></div>
        </div>
      </div>
      <!--   对比车   -->
      <div class="Compare_car">
        <h4 class="Compare_carTitle">[{{compareCarNum}}/3] 对比栏</h4>
        <ul>
          <li class="Compare_contrast" v-for="(item,index) in compareCarArray" v-if="index<3"
              @mouseover="delePhoneflag = index" @mouseout="delePhoneflag = ''">
            <img :src="item.imgsrc" alt="">
            <span class="DelePhone" v-show="delePhoneflag === index?true:false" @click="deleSinglePhone(index)">x</span>
            <p class="phone_title">{{item.type}}</p>
          </li>
        </ul>
        <div class="Compare_carBottom">
          <span @click="GoCompare">对比</span>
          <span @click="clearCompare()">清空对比栏</span>
        </div>
      </div>

      <!--  结束  -->
      <div class="End_mess">

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HomePage",
    data() {
      return {
        message: '123',
        PhoneList: [
          {
            'price': '4500$',
            'date': '2020年2月01日',
            'type': '华为',
            'Cpu': '三星 Exynos 980',
            'swift': '支持',
            'imgsrc': require('../assets/xiaomi10.jpg'),
            'lightflag': false,
          },
          {
            'price': '1500$',
            'date': '2019年12月01日',
            'type': '三星',
            'Cpu': '三星 Exynos 980',
            'swift': '不支持',
            'imgsrc': require('../assets/appleIphone11.jpg'),
            'lightflag': false,
          },
          {
            'price': '5000$',
            'date': '2019年10月01日',
            'type': '苹果',
            'Cpu': 'ios Exynos 980',
            'swift': '支持',
            'imgsrc': require('../assets/oppoReno.jpg'),
            'lightflag': false,
          },
          {
            'price': '5000$',
            'date': '2019年10月01日',
            'type': '小米',
            'Cpu': 'ios Exynos 980',
            'swift': '支持',
            'imgsrc': require('../assets/rongyaov30.jpg'),
            'lightflag': false,
          },
          {
            'price': '5000$',
            'date': '2019年10月01日',
            'type': '苹果',
            'Cpu': 'ios Exynos 980',
            'swift': '支持',
            'imgsrc': require('../assets/vivo.jpg'),
            'lightflag': false,
          },
          {
            'price': '5000$',
            'date': '2019年10月01日',
            'type': '一加 7',
            'Cpu': 'ios Exynos 980',
            'swift': '支持',
            'imgsrc': require('../assets/yijia7T.jpg'),
            'lightflag': false,
          },
        ],
        compareflag: undefined,  //对比按钮的显示隐藏
        pageflag: false, //上一页的显示隐藏
        pagelightflag: 1, //数字按钮高光
        delePhoneflag: '', //删除单个手机的flag
        compareCarArray: [],//对比栏手机数组
        compareCarNum: 0,//对比栏手机数量
        pageNum: 1,//页数设置 默认设置1
        NewsPhone: [],// 手机新品数组
        animate: false,//手机新品轮播 过渡
        NewsPhoneflag: 0,//默认手机新品 li 显示
      }
    },
    created() {
    },
    mounted() {
      var NewsPhones = this.PhoneList;
      this.NewsPhone = NewsPhones;
      // setInterval(this.PhoneScroll,2000);
    },
    methods: {
      //对比按钮的显影
      compareBtn(index) {
        this.compareflag = index;
      },
      //添加手机进如对比栏
      addCompare(item) {
        if (this.compareCarNum == 3) {
          alert('抱歉你只能选三款产品进行比较');
          return;
        }
        this.compareCarArray.push(item);
        var compareNumber = this.compareCarArray.length;
        this.compareCarNum = compareNumber++;
      },
      // 手机新品轮播
      PhoneScroll() {
        this.animate = true;
        setTimeout(() => {   //es6箭头函数 省去this的指向问题
          this.NewsPhone.push(this.NewsPhone[0]);
          this.NewsPhone.shift();
          this.animate = false;
        }, 1000)
      },
      // 上一页点击事件
      fontClick() {
        this.pageNum--;
        this.pagelightflag--;
        if (this.pageNum == 1) {
          this.pageflag = false;
        }
      },
      // 下一页点击事件
      nextClick() {
        this.pageflag = true;
        this.pageNum++;
        this.pagelightflag++;
      },
      // 数字点击事件
      numClick(num) {
        this.pagelightflag = num;
        if (num == 1) {
          this.pageflag = false;
        }
      },
      deleSinglePhone(index) {
        alert('删除' + index);
      },
      //手机数据对比跳转
      GoCompare() {
        this.$router.push({
          path: '/PhoneCompare',
        })
      },
      clearCompare() {
        this.compareCarArray = [];
        // this.compareCarArray.length = 0;
        this.compareCarNum = this.compareCarArray.length;
      }
    },

  }
</script>

<style scoped>
  #temp {
    height: 100%;
    width: 100%;
    display: block;
  }

  .theader {
    width: 100%;
    min-width: 1400px;
    margin: auto;
    display: inline-block;
    height: auto;

  }

  .tmiddle {
    margin: 10px auto;
    /*width: 1300px;*/
    height: auto;
    width: 88%;
    min-width: 1300px;
    display: inline-block;
  }

  .Phone_swiper {
    background-color: darkblue;
    height: 300px;
  }

  .Notify_mess {
    background-color: purple;
    height: 50px;
  }

  .Phone_mess {
    /*background-color: darkcyan;*/
    width: 898px;
    /*height: 400px;*/
    float: left;
    font-size: 13px;
    height: auto;
    box-sizing: border-box;
    /*position: relative;*/
    /*display: inline-block;*/
  }

  .Phone_mess img {
    /*display: inline-block;*/
    width: 200px;
    height: auto;
  }

  .phone_ul {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
  }

  .phone_list {
    margin-left: 15px;
    /*margin-top: 10px;*/
    height: 230px;
    border: 1px solid lemonchiffon;
  }

  .phone_list a {
    width: 100%;
    display: block;
  }

  .phone_list p:last-child:hover{
    border: 1px solid red;
    cursor: pointer;
  }

  .phone_listHover {
    transform: translateY(-10px);
  }

  .phone_list p {
    color: #000;
  }

  .phone_list .comment_row {
    margin-top: 4px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
  }

  .phone_list .comment_row .star {
    display: inline-block;
    width: 69px;
    height: 12px;
    background-position: 0 -113px;
    background-image: url(../assets/pingfen.png);
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .phone_list .comment_row .star em {
    display: block;
    width: 69px;
    height: 12px;
    padding: 0 10px 0 0;
    background-image: url(../assets/pingfen.png);
    background-repeat: no-repeat;
    background-position: 0 -98px;
  }


  /*.phone_compare{*/
  /*  display: none;*/
  /*}*/

  .price_style {
    color: red;
    /*font-size: 13px;*/
    text-align: center;
    font-weight: bold;
  }

  .PageBtn {
    height: auto;
    width: 100%;
  }

  .PageBtn span {
    display: inline-block;
    border: 1px solid rebeccapurple;
    /*padding: 5px;*/
    margin-bottom: 5px;
    height: 30px;
    line-height: 30px;
  }

  .PageBtn .pagelight {
    background-color: #6467b6;
  }

  .fontBtn {
    width: 70px;
  }

  .NumBtn {
    width: 40px;
  }

  .nextBtn {
    width: 70px;
  }

  .News {
    background-color: #ffffff;
    width: 400px;
    /*height: 400px;*/
    float: left;
    /*border: 1px solid #e6e6e6;*/
    /*display: inline-block;*/
  }

  .News .News_Main {
    width: 70%;
    margin: 0px auto;
    background-color: #fff;
    border: 1px solid #e6e6e6;
  }

  .News .News_Main .News_title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    /*padding: 5px;*/
    color: black;
    background-color: goldenrod;
  }

  .News .News_Main .News_middle {
  }

  .News .News_Main .News_middle .anim {
    transition: all 0.5s;
    margin-top: -30px;
  }

  .News .News_Main .News_middle li {
    text-align: left;
    padding: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font-size: 12px;
  }

  .News .News_Main .News_middle li img {
    display: inline-block;
    margin-left: 5px;
    width: 80px;
    height: auto;
  }

  .News .News_Main .News_middle .liHoverblock {
    position: absolute;
  }

  .News .News_Main .News_middle li em {
    color: gray;
    display: inline-block;
  }

  .News .News_Main .News_middle .hotEm {
    color: red !important;
  }

  .News .News_Main .News_middle li p {
    display: inline-block;
    margin-left: 10px;
  }

  .Compare_car {
    position: fixed;
    width: 100px;
    background-color: #ffffff;
    right: 10px;
    top: 50px;
  }

  .Compare_car ul li:nth-child(1):hover {
    border: 1px dashed #6467b6;
  }

  .Compare_car ul li:nth-child(2):hover {
    border: 1px dashed #6467b6;
  }

  .Compare_car ul li:nth-child(3):hover {
    border: 1px dashed #6467b6;
  }

  .Compare_car .Compare_carTitle {
    color: white;
    font-size: 13px;
    background-color: #6467b6;
    height: 25px;
    line-height: 25px;
  }

  .Compare_car .Compare_contrast {
    position: relative;
    border: 1px solid transparent;
  }

  .Compare_car .Compare_contrast img {
    width: 80%;
    height: auto;
  }

  .Compare_car .Compare_contrast .DelePhone {
    position: absolute;
    font-weight: bold;
    width: 15px;
    height: 15px;
    line-height: 15px;
    right: 0px;
    /*background-color: #6467b6;*/
  }

  .Compare_car .Compare_contrast p {
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 2px;
  }

  .Compare_carBottom {

  }

  .Compare_carBottom span {
    display: block;
    text-align: center;
    margin: 5px auto;
    width: 80%;
    height: 25px;
    line-height: 25px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }

  .Compare_carBottom span:nth-child(1) {
    background-color: #6467b6;
    color: #ffffff;
  }

  .Compare_carBottom span:nth-child(1):hover {
    background-color: blue;
    cursor: pointer;
  }

  .Compare_carBottom span:nth-child(2):hover {
    color: red;
    cursor: pointer;
  }

  .End_mess {
    background-color: purple;
    float: left;
    width: 100%;
    height: 50px;
  }
</style>
